<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI 画坊 - 我的</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: #f0f2f5;
            color: #202020;
            padding-bottom: 60px; /* Space for tab bar */
        }
        
        .t-status-bar {
            height: 44px;
            background-color: #ffffff;
            width: 100%;
        }
        
        .tab-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 60px;
            background: white;
            display: flex;
            border-top: 1px solid #e5e5e5;
            z-index: 100;
        }
        
        .tab-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
            color: #999;
        }
        
        .tab-item.active {
            color: #0052d9; /* TDesign primary blue */
        }
        
        .tab-icon {
            font-size: 1.5rem;
            margin-bottom: 4px;
        }
        
        .login-button {
            background-color: #07c160; /* WeChat green */
            color: white;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 12px 24px;
            font-size: 16px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        
        .wechat-icon {
            margin-right: 8px;
        }
    </style>
    <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
</head>
<body>
    <!-- Status Bar -->
    <div class="t-status-bar flex items-center px-4">
        <div class="text-base font-medium">我的</div>
    </div>
    
    <!-- Content -->
    <div class="flex flex-col items-center justify-center h-screen -mt-20">
        <img src="https://cdn-icons-png.flaticon.com/512/1077/1077114.png" alt="User Icon" class="w-24 h-24 mb-6 opacity-30">
        <p class="text-gray-500 mb-8">登录后可查看个人画作和创作记录</p>
        
        <button class="login-button">
            <i class="ri-wechat-line wechat-icon"></i>
            微信一键登录
        </button>
    </div>
    
    <!-- Tab Bar -->
    <div class="tab-bar">
        <div class="tab-item">
            <i class="tab-icon ri-home-5-line"></i>
            <span>首页</span>
        </div>
        <div class="tab-item active">
            <i class="tab-icon ri-user-line"></i>
            <span>我的</span>
        </div>
    </div>
</body>
</html> 